<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style type="text/css">
    input{
        height: 30px;
    }
    #test1{
        width: 300px;
    }
    .tdOver{
        width:50%; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;
    }
    #showSpare{
        width:100%; table-layout:fixed;  border:1px solid white;
    }
    #rightSpare{
       height:400px; float:left; width:58%; margin-left:20px;
    }
    a{
        text-decoration: none;
    }
</style>
<body>
<div>首页/服务类型管理</div><hr />
<form id="myForm">
    <div>
        <div>
            <table  cellpadding="20"   height="350px">
                <tr>
                    <td colspan="4" align="center"><b>添加新服务</b></td>
                </tr>
                <tr align="center">
                    <td style="width:200px;">服务名称：</td>
                    <td>
                        <input type="text" id="serviceName" name="servicetypename"/>
                    </td>
                    <td>服务价格：</td>
                    <td>
                        <input type="text" id="servicePrice" name="servicetypeserviceprice"/>
                    </td>
                </tr>
                <tr align="center">
                    <td >服务简介：</td>
                    <td colspan="3">
                        <textarea rows="5" cols="120" name="servicetypemark"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div>
                            <div id="leftSpare" style="height:400px;float:left;width:38%;margin-left: 1%;" >
                                <div><span>您已选择的配件：</span></div>
                                <div  >
                                    <table id="chooseSpare" align="center" cellpadding="10" style="border:1px solid white;width:100%;margin-top: 4.5%;">
                                        <tr align="center">
                                            <th>品牌</th>
                                            <th>数量</th>
                                            <th>操作</th>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div id="rightSpare">
                                <div><span>请选择您所需要的配件：</span>
                                    <input type="text" id="query" style="width:60%;"></div>
                                <div  >
                                    <table id="showSpare"cellpadding="10"> </table>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="4" >
                        <input type="button" value="保存" style="width:50px;border:0px;background-color: skyblue;" id="agreementSub" />
                        <a href="/admin/serviceType.html" id="a"><input style="width:50px;border:0px;background-color: skyblue;margin-left: 10%" type="button" value="返回"/></a>
                    </td>
                </tr>
                <tbody id="TableData" class="datas">

                </tbody>
            </table>
        </div>

    </div>
</form>
</body>
<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    //  初始加载配件信息
    $(document).ready(function(){
        sendAjax(1,"");
    });

    //  点击选择配件，添加到已选择
    $(document).on("click","a[name=choose]",function(){
        var url = this.href;
        var str = url.substring(url.indexOf("?")+1);
        var prama = str.split("&");
        var spareId = prama[0].split("=")[1];
        var brand = prama[1].split("=")[1];
        for(var i=0;i<$("input[name=chooseId]").size();i++){
            if(parseInt($("input[name=chooseId]").eq(i).val()) == spareId){
                var hid =$("input[name=chooseId]").eq(i);
                var addCount = parseInt($(hid).next().next().html())+1;
                $(hid).next().next().html(addCount);
                return;
            }
        }
        var resultTable = "<tr align='center'><td>";
        resultTable +=brand+"</td><td><input type='hidden' name='chooseId' value='"+spareId+"'>";
        resultTable +="<a href='#' onclick='return false' name='takeDown'>-</a>&emsp;" +
            "<span id='spareCount'>"+1+"</span>&emsp;" +
            "<a href='#'onclick='return false' name='up'>+</a></td><td>";
        resultTable +="<a name='removeChoosed'onclick='return false' href='#?spareId = "+spareId+"'>移除</a>";
        $("table[id=chooseSpare]").append(resultTable);
    });

    //  点击移除，从左侧已选里删除
    $(document).on("click","a[name=removeChoosed]",function(){
        $(this).parent().parent().remove();
    });

    // 点击+号，增加数量
    $(document).on("click","a[name=up]",function(){
        var addCount = parseInt($(this).prev().html())+1;
        $(this).prev().html(addCount);
    });
    // 点击-号，减少数量
    $(document).on("click","a[name=takeDown]",function(){
        var downCount = parseInt($(this).next().html())-1;
        if(downCount<=0){
            downCount = 1;
        };
        $(this).next().html(downCount);
    });

     /**
     *  配件模糊查询,发送ajax请求
     */
    //  计时器
    var queryBylikeTimeOut;
    //  键盘弹起启动计时器，调用方法发送ajax请求模糊查询
   $("input[id=query]").bind("keyup",function(){
       queryBylikeTimeOut = setTimeout(queryBylike, 100);
   });
   //   键盘按下关闭计时器
    $("input[id=query]").bind("keydown",function(){
        clearTimeout(queryBylikeTimeOut);
    });
    //  调用方法发送ajax请求模糊查询（计时器绑定的方法）
    function queryBylike(){
       var like = $("input[id=query]").val();
       sendAjax(1,like);
    }

    /**
     *  点击翻页，根据模糊条件翻页
     */
    $(document).on("click","a[name=changePage]",function(){
        var like = $("input[id=query]").val();
        //  获取选择的页码
        var url = this.href;
        var str = url.split("?")[1];
        var pageNo = str.split("=")[1];
        sendAjax(pageNo,like);
    });

    /**
     *  点击保存按钮，调用ajax方法将数据存入数据库
     */
    $("#agreementSub").click(function () {
        //  获取数据
        var serviceName = $("#serviceName").val();
        var servicePrice = $("#servicePrice").val();
        var servicetypemark = $("textarea[name=servicetypemark]").val();
        var spareIdList = [];
        var countList =  [];
        //  获取选择的配件编号和数量
        for(var i =0;i<$("input[name=chooseId]").size();i++){
            spareIdList[i]=$("input[name=chooseId]").eq(i).val();
            countList[i]=$("input[name=chooseId]").eq(i).next().next().html();
        }
        var spareJson = JSON.stringify(spareIdList);
        var countJson = JSON.stringify(countList);
            //  发送ajax请求到后台，存储数据
        $.ajax({
            url:"/addServiceType",
            type:"POST",
            data:{"serviceTypeServicePrice":servicePrice,"serviceTypeName":serviceName,"serviceTypeMark":servicetypemark,"spareIdList":spareJson,"countList":countJson},
            success:function (data){
                window.location.href="/admin/serviceType.html";
            }
        });
    });
    $("input[id=agreementSub]").click(function(){
        sendAjax(1,"");
    });
    function sendAjax(pageNo,like){
        $.ajax({
            type:"POST",
            url:"/queryAllSpare",
            data:{"pageNo":pageNo,"like":like},
            success:function (data) {
                console.log(data);
                var resultTable = "";
                if(data.list.size<=0){
                    resultTable += "<tr><td>没有可以使用的配件哦，请进货...</td></tr>";
                }else{
                    var str = "<tr align='center' style='width:100%;'>" +
                        "<th>操作</th>" +
                        "<th>编号</th>" +
                        "<th>品牌</th>" +
                        "<th class='tdOver'>作用</th>" +
                        " </tr>";
                    for(var index in data.list){
                        str += "<tr align='center' class='tr'><td><a name='choose'id='choose"+data.list[index].spareinventoryid+"' onclick='return false' href='#?spareId="+
                                data.list[index].spareinventoryid+"&brand="+
                                data.list[index].spareinventorybrand+"'>选择</a></td>";
                        str += "<td>"+data.list[index].spareinventoryid+"</td>";
                        str += "<td>"+data.list[index].spareinventorybrand+"</td>";
                        str += "<td class='tdOver'>"+data.list[index].spareinventoryuse+"</td>";
                        str += "</tr>";
                    }
                    str +="<tr align='center'><td colspan='4'>";
                    str +="共"+data.dataTotal+"条数据&emsp;";
                    str +="共"+data.pageNo+"/"+data.pageTotal+"页&emsp;";
                    str +="<a name='changePage' id='pre' href='#?pageNo=1'>首页</a>&emsp;";
                    str +="<a name='changePage' href='#?pageNo="+data.prePageNo+"'>上一页</a>&emsp;";
                    str +="<a name='changePage' href='#?pageNo="+data.nextPageNo+"'>下一页</a>&emsp;";
                    str +="<a name='changePage' href='#?pageNo="+data.pageTotal+"'>尾页</a>&emsp;";
                    $("input[id=query]").val(data.like);
                    resultTable = str;
                }
                //  将数据绑定到表中
                $("table[id=showSpare]").empty();
                $("table[id=showSpare]").append(resultTable);
            }
        });
    }
</script>
</html>
